<template>
    <div class=''>
        <el-input class="cu-input" size="small" placeholder="请选择产品" v-model.trim="name" 
            @click.native="handleSelect">
            <template #append>
                <el-button type="primary" size="small" @click="handleSelect">选择</el-button>
            </template>
        </el-input>
        <el-dialog title="选择产品" :visible.sync="dialogState.show" width="1200px" :close-on-press-escape="false"
            :close-on-click-modal="false" append-to-body destroy-on-close>
            <div class="common-container">
                <!-- <div class="header">
                    <div class="header_left">
                        <el-input v-model="search_val" placeholder="产品名称" clearable @clear="clearProductName"
                            size="small" style="width: 220px">
                            <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
                                @click="searchButton">
                            </el-button>
                        </el-input>
                    </div>
                </div> -->
                <div class="content">
                    <el-table :data="tableData" height="calc(100% - 0px)" class="table"
                        :header-cell-style="headerStyle" @row-click="handleRowClick">
                        <el-table-column align="center" label="序号" type="index" width="80"
                            height="30"></el-table-column>
                        <el-table-column align="center" prop="name" label="产品名称" min-width="135"></el-table-column>
                        <el-table-column align="center" prop="deviceType" label="产品类型"
                            min-width="135"></el-table-column>
                        <!-- <el-table-column align="center" prop="isOpenLocate" label="产品图片" min-width="155">
                            <template slot-scope="scope">
                                <el-avatar v-if="scope.row.img && scope.row.img != null" shape="square" :size="40"
                                    fit="fill" :src="scope.row.img"></el-avatar>
                                <span v-else></span>
                            </template>
                        </el-table-column> -->
                    </el-table>
                    <!-- <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="getData"
                        class="pagination" /> -->
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogState.show = false" size="small">取消</el-button>
                    <el-button type="primary" @click="handleMultiple" size="small">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { reqProductList } from "@api/api.js";
import Pagination from "@components/Pagination.vue";
import tableStyleMixin from "@mixin/table-style";

export default {
    props: {
        // id: {
        //     type: String,
        //     default: ''
        // },
        pk: {
            type: String,
            default: ''
        },
        indexes: {
            type: Number,
            default: ''
        },
        // multiple: {
        //     type: Boolean,
        //     default: false
        // }
    },
    components: {
        Pagination
    },
    mixins: [tableStyleMixin],
    data() {
        return {
            name: "",
            search_val: "",
            loadingSearch: false, //查询按钮loading
            allData: [], // 初始化为空数组
            data: [], // 用于存储获取到的数据
            loading: false, // 加载状态
            total: 0, // 总条数
            page: 1,
            limit: 10,
            tableData: [],
            dialogState: {
                show: false,
                data: {}
            },
        }
    },
    computed: {
    },
    watch: {
    },
    methods: {
        handleRowClick(row) {
            // console.log(row);
            row.index = this.indexes
            this.$emit('onSelect', row)
            this.name = row.name;
            this.dialogState.show = false
        },
        // 清空
        clearProductName() {
            this.page = 1;
            this.limit = 10;
            this.getData();
        },
        // 点击查询
        async searchButton() {
            this.page = 1;
            this.limit = 10;
            this.loadingSearch = true;
            await this.getData();
            this.loadingSearch = false;
        },
        handleMultiple() {
            this.dialogState.show = false;
        },
        handleSelect() {
            this.dialogState.show = true;
        },
        // 编辑显示产品名称
        async getAllData() {
            let res = await reqProductList({
                pageNum: 1,
                pageSize: 999,
                data: {
                    name: "", //名称
                    productKey: "", //key
                },
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.allData = res.data.rows || []
            console.log(this.allData, '1234');
            this.allData.forEach(item => {
                if (item.deviceType == this.pk) {
                    this.handleRowClick(item)//调用物模型
                    return;
                }
            })
        },
        // 获取数据的方法
        async getData() {
            let res = await reqProductList({
                pageNum: this.page,
                pageSize: this.limit,
                data: {
                    name: this.search_val || "", //名称
                    productKey: "", //key
                },
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            let { rows, total } = res.data;
            this.tableData = rows;
            this.total = total||0;
        },
    },
    created() {
        this.getData(); // 获取产品列表数据
        this.getAllData() // 编辑显示产品名称
    },
    mounted() {

    },
    activated(){
       
    }
}
</script>

<style lang='less' scoped>
@import url("../../views/common.less");
@import url("~@views/style/tablePage.less");

::v-deep .el-dialog__body {
    padding: 5px 20px;
    min-height: 70vh;
}

.common-container .content {
    height: 62vh;
}

.cu-input {
    cursor: pointer;
}
</style>